@mixboxc: @cwh*0.95;
.top-navbar {
    .pd;
    .bdrb;
    .clear;
    position: relative;
    background-color: @cwh;
    .list-inline {
        display: inline-block;
        .mgb(0);
        a {
            .trs;
            color: @cc2;
            font-size: ceil(@rem*0.8);
        }
    }
    &.unbg {
        .unbg;
        border-color: @cc2*1.6;
        a{
            &:hover{
                color: @ces;
            }
        }
    }
}
.navbar {
    .unbdr;
    .unbd;
    .nav {
        > li {
            > a {
                font-size: 14px;
            }
        }
    }
    input.form-control {
        height: auto;
    }
    .navbar-center {
        position: absolute;
        left: 50%;
        width: 100%;
        text-align: center;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        z-index: 2;
        > li {
            display: inline-block;
            float: initial;
        }
    }
    &.navbar-inverse {
        .navbar-nav {
            > li {
                &.active {
                    a {
                        color: @cwh!important;
                    }
                }
                > a {
                    &:hover {
                        color: @cwh!important;
                    }
                }
            }
        }
    }
    &.unbg {
        .unbg;
    }

    &.vba-navbar {
        &+&-down {
            .mgt(-20px);
            .navbar-collapse {
                .bdrt;
            }
        }
        &+.top-navbar {
            .mgt(-20px);
            background-color: @mixboxc;
            .list-inline {
                li {
                    .pdl;
                    .pdr;
                }
            }
            a {
                &:hover {
                    text-decoration: none;
                    color: @cc;
                }
                font-size: @rem;
            }
        }
        &+.mixbox {
            background-color: @cwh;
            .mgb(ceil(@mpb*1.3));
            .mgt(-20px);
            .pd(2*@mpb @mpb 0 @mpb);
            &.down {
                .mgt(ceil(-@mpb/2))
            }
        }
    }
    &.vba-navbar {
        @media (min-width:768px) {
            @nhg: 110px;
            min-height: @nhg;
            .navbar-brand {
                .pd(3*@mpb @mpb);
            }
            .collapse {
                position: relative;
                z-index: 1;
                .navbar-left,
                .navbar-right {
                    position: relative;
                    z-index: 3;
                }
            }
            .navbar-nav {
                > li {
                    &.active {
                        a {
                            .unbg;
                            color: @cc;
                            .blod;
                        }
                    }
                    > a {
                        .pd(2*@mpb @mpb);
                        line-height: 48px;
                        font-size: 16px;
                        color: @cc2;
                        &:hover {
                            .unbg;
                            color: @cc;
                        }
                        .iconfont:only-of-type {
                            .mgr(10px);
                        }
                    }
                    &.user {
                        &.dropdown {
                            img.user-header {
                                width: 2*@mpb;
                            }
                            &.open {
                                > a {
                                    .unbg;
                                }
                            }
                        }
                        .nav-left & {
                            .dropdown-menu {
                                right: initial;
                                left: 0;
                            }
                        }
                    }
                    &.logo {
                        .mgl(-@mpb);
                    }
                }
                &.arrow {
                    li {
                        &.active {
                            &:before {
                                content: "";
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                width: 0;
                                height: 0;
                                border-left: ceil(@mpb/2) solid transparent;
                                border-right: ceil(@mpb/2) solid transparent;
                                border-bottom: ceil(@mpb/2) solid @mixboxc;
                                margin: 0 auto;
                            }
                        }
                    }
                    &.down {
                        li {
                            &.active {
                                &:before {
                                    bottom: -@mpb;
                                    border-bottom-color: @cwh;
                                }
                            }
                        }
                    }
                }
            }
            .navbar-form {
                .mgt(37px);
                .form-group {
                    &.seach {
                        .form-control {
                            .pdl;
                            .pdr;
                            &.line {
                                &+.line-label {
                                    &:before {
                                        .iconfont;
                                        content: "\e662";
                                        position: absolute;
                                        font-size: 18px;
                                        top: -18px;
                                        right: @mpb;
                                        -webkit-transform: translateY(-50%);
                                        -moz-transform: translateY(-50%);
                                        -ms-transform: translateY(-50%);
                                        -o-transform: translateY(-50%);
                                        transform: translateY(-50%);
                                    }
                                }
                            }
                            &:focus+.line-label {
                                &:before {
                                    content: "";
                                }
                            }
                            &:focus {
                                width: auto;
                            }
                        }
                    }
                }
            }
        }
    }
}
